<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div span {
        display: inline-block;
        border-radius: 5px;
        font-size: 100px;
        padding: 5px;
        margin: 2px;
        background-color: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        vertical-align: middle;

    }
</style>

<body>
    <div>
        <span id="d"></span>
        <span>天</span>
        <span id="h"></span>
        <span>时</span>
        <span id="m"></span>
        <span>分</span>
        <span id="s"></span>
        <span>秒</span>
    </div>
</body>
<script>
    //倒计时


    function countdown() {
        var d = document.querySelector('#d')
        var h = document.querySelector('#h')
        var m = document.querySelector('#m')
        var s = document.querySelector('#s')


        var date = +new Date();
        var Edate = +new Date('2023/04/22 00:00:00');

        var Cdown = parseInt((Edate - date) / 1000);


        var dd = parseInt(Cdown / 60 / 60 / 24);
        var hh = parseInt(Cdown / 60 / 60) % 24;
        var mm = parseInt(Cdown / 60) % 60;
        var ss = Cdown % 60;

        dd = dd < 10 ? '0' + dd : dd;
        hh = hh < 10 ? '0' + hh : hh;
        mm = mm < 10 ? '0' + mm : mm;
        ss = ss < 10 ? '0' + ss : ss;

        d.innerHTML = dd;
        h.innerHTML = hh;
        m.innerHTML = mm;
        s.innerHTML = ss;

        setInterval(countdown, 1000)
    }
    countdown()
    
</script>

</html>